<template>
	<view class="collection-page">
		<!-- 雪花背景 -->
		<canvas canvas-id="snow-canvas" class="snow-canvas"></canvas>

		<!-- 标题 -->
		<view class="header">💌 我的收藏</view>

		<!-- 告白内容列表 -->
		<scroll-view scroll-y class="content" refresher-enabled :refresher-triggered="refreshing"
			@refresherrefresh="onRefresh">
			<view style="padding: 25rpx;">
				<view v-for="(item, index) in confessionList" :key="index" class="confession-card">
					<view class="confession-header">
						<text class="nickname">{{ item.anonymous ? "匿名用户" : item.nickname }}</text>
						<text class="timestamp">{{ item.time }}</text>
					</view>
					<view class="confession-content">{{ item.content }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refreshing: false,
				confessionList: [{
						nickname: "小月亮",
						content: "喜欢你是我做过最勇敢的事 🌙",
						time: "2025-05-13 15:20",
						anonymous: false
					},
					{
						nickname: "心动代码",
						content: "看你一眼，心跳重启一次。",
						time: "2025-05-12 18:05",
						anonymous: true
					},
					{
						nickname: "阿泽",
						content: "希望你每天都能被喜欢包围。",
						time: "2025-05-10 09:47",
						anonymous: false
					}
				]
			};
		},
		onReady() {
			this.initSnowEffect();
		},
		methods: {
			onRefresh() {
				this.refreshing = true;
				setTimeout(() => {
					this.confessionList.unshift({
						nickname: "匿名用户",
						content: "愿你眼里总有光，心中总有爱。",
						time: new Date().toLocaleString(),
						anonymous: true
					});
					this.refreshing = false;
				}, 1200);
			},
			initSnowEffect() {
				const sys = uni.getSystemInfoSync();
				const W = sys.windowWidth;
				const H = sys.windowHeight;
				const ctx = uni.createCanvasContext('snow-canvas', this);
				const snowflakes = Array.from({
					length: 35
				}, () => ({
					x: Math.random() * W,
					y: Math.random() * H,
					r: Math.random() * 2.5 + 1,
					d: Math.random() * 1.5 + 0.5
				}));

				const draw = () => {
					ctx.clearRect(0, 0, W, H);
					ctx.setFillStyle('rgba(255,255,255,0.8)');
					ctx.beginPath();
					snowflakes.forEach(flake => {
						ctx.moveTo(flake.x, flake.y);
						ctx.arc(flake.x, flake.y, flake.r, 0, Math.PI * 2);
					});
					ctx.fill();
					snowflakes.forEach(flake => {
						flake.y += flake.d;
						flake.x += Math.sin(flake.y / 30) * 0.6;
						if (flake.y > H) {
							flake.y = 0;
							flake.x = Math.random() * W;
						}
					});
					ctx.draw();
					// #ifdef H5
					requestAnimationFrame(draw);
					// #endif
					// #ifdef MP-WEIXIN
					setTimeout(draw, 1000 / 60);
					// #endif
				};
				draw();
			}
		}
	};
</script>

<style scoped>
	.collection-page {
		position: relative;
		width: 100%;
		height: 100vh;
		background: linear-gradient(to bottom right, #e3f2fd, #fce4ec);
		overflow: hidden;
	}

	.snow-canvas {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100vw;
		height: 100vh;
		pointer-events: none;
	}

	.header {
		position: relative;
		z-index: 1;
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		padding: 30rpx 0;
		color: #ec407a;
		text-shadow: 0 0 8rpx #fff;
	}

	.content {
		position: relative;
		z-index: 1;
		height: calc(100vh - 120rpx);
	}

	.confession-card {
		background: #ffffffdd;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.05);
		animation: fadeInUp 0.5s ease;
	}

	.confession-header {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #888;
		margin-bottom: 10rpx;
	}

	.nickname {
		font-weight: bold;
		color: #42a5f5;
	}

	.timestamp {
		font-size: 24rpx;
	}

	.confession-content {
		font-size: 30rpx;
		line-height: 1.6;
		color: #333;
	}

	/* 动画 */
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>